import {Component, Input, OnInit} from '@angular/core';
import * as echarts from 'echarts';
import {ContentService} from '../content.service';

@Component({
  selector: 'app-publish-organ-chart',
  templateUrl: './publish-organ-chart.component.html',
  styleUrls: ['./publish-organ-chart.component.less']
})
export class PublishOrganChartComponent implements OnInit {
  provinceList = [];
  @Input() heightCount: string;
  @Input() dataBySearch: any;

  constructor(private CService: ContentService) {
  }

  ngOnInit(): void {
    this.getPublishOrgan();
  }

  setBarChart(option: any) {
    const el = document.getElementById('publish-organ') as HTMLDivElement;
    const myCharts = echarts.init(el);
    myCharts.resize({height: this.heightCount});
    const series1 = [];
    for (const optionItem of option) {
      const seriesItem = {
        data: optionItem,
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        }
      };
      series1.push(seriesItem);
    }
    myCharts.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: Array<any> ) => {
          let tar = params[0].axisValueLabel + '<br/>';
          for (const item of params) {
            if (item.value === undefined) {
              tar += '';
            } else {
              tar += item.marker + item.name + ': ' + item.value + '<br/>';
            }
          }
          return tar;
        }
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: {interval: 0},
          data: this.provinceList,
          splitLine: {show: false}
        }
      ],
      dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 50
        },
        {
          type: 'inside',
          realtime: true,
          start: 0,
          end: 50
        }
      ],
      yAxis: {
        type: 'value'
      },
      series: series1
      // [{
      //   data: this.organCountList,
      //   type: 'bar',
      //   showBackground: true,
      //   backgroundStyle: {
      //     color: 'rgba(220, 220, 220, 0.8)'
      //   },
      //   itemStyle: {
      //     color: '#034ea2'
      //   }
      // }]
    });

  }

  getPublishOrgan() {
    if (this.dataBySearch) {
      const params = this.formatChartData(this.dataBySearch);
      this.setBarChart(params);
    } else {
      this.CService.getPublishOrgan().subscribe(res => {
        const params = this.formatChartData(res.result);
        this.setBarChart(params);
      });
    }

  }

  // 格式化数据
  formatChartData(option: any) {
    // 缓存所有省份list
    this.provinceList = [];
    for (let i = 0; i < option.length; i++) {
      if (i % 2) {
        this.provinceList.push(option[i].name);
      } else {
        this.provinceList.push('\n' + option[i].name);

      }
    }
    const formatData = [];
    for (let i = 0; i < 5; i++) {
      const formatLine = [];
      for (const optionItem of option) {
        formatLine.push(optionItem.chartCounts[i]);
      }
      formatData.push(formatLine);
    }
    return formatData;
  }
}
